<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="width"
    :close-on-click-modal="false"
  >
    <el-form ref="dialogForm" :model="dialogForm" :rules="dialogFormRules" label-width="100px">
      <el-form-item label="皮肤名称" prop="strThemeName">
        <el-col :span="12">
          <el-input v-model="dialogForm.strThemeName" placeholder="请输入皮肤名称" />
        </el-col>
      </el-form-item>
      <el-form-item label="皮肤链接" prop="strUrl">
        <el-col :span="12">
          <el-input v-model="dialogForm.strUrl" placeholder="请输入皮肤链接" />
        </el-col>
      </el-form-item>
      <el-form-item label="皮肤缩略图" prop="strImg">
        <el-upload
          :action="baseImgRUL"
          name="uploadFile"
          class="avatar-uploader"
          :show-file-list="false"
          :on-success="(response, file)=>handleSuccess(response, file, 'dialogForm', 'strImg')"
          :before-upload="beforeUpload"
        >
          <img v-if="dialogForm.strImg" :src="dialogForm.strImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <el-form-item label="皮肤文件" prop="strImg">
        <el-upload
          :action="baseImgRUL"
          name="uploadFile"
          class="avatar-uploader"
          :show-file-list="false"
          :on-success="(response, file)=>handleSuccess(response, file, 'dialogForm', 'strUrl')"
          :before-upload="beforeUpload"
        >
          <img v-if="dialogForm.strUrl" :src="dialogForm.strUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <el-form-item label="操作者">
        <el-col :span="12">
          <el-input v-model="dialogForm.strOperator" disabled />
        </el-col>
      </el-form-item>
      <el-form-item label="设备类型" prop="iDevicesysnum">
        <el-select v-model="dialogForm.iDevicesysnum" placeholder="请选择设备类型">
          <el-option
            v-for="item in optionsType"
            :key="item.id"
            :label="item.strValue"
            :value="item.iDevicesysnum"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属机构" prop="iOrgsysnum">
        <el-cascader
          v-model="dialogForm.iOrgsysnum"
          :show-all-levels="false"
          :options="options"
          :props="{ checkStrictly: true, value:'strOrgnum',label:'strOrgname',children: 'yhlist' }"
        />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="cancleDialog('dialogForm')">取 消</el-button>
      <el-button v-if="dialogTitle === dialogOptions.add" type="primary" @click="confirmSubmit('dialogForm')">确 定</el-button>
      <el-button v-else type="primary" @click="modifiedSubmit('dialogForm')">修 改</el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadImg from '@/mixins/uploadImg'
import { validateUrl } from '@/utils/validateForm'
import { confirmAddTheme, updateRowTheme } from '../../../api/themeapi'
export default {
  name: 'DialogCom',
  mixins: [uploadImg],
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => false
    },
    dialogTitle: {
      type: String,
      default: () => '添加皮肤'
    },
    options: {
      type: Array,
      default: () => []
    },
    optionsType: {
      type: Array,
      default: () => []
    },
    formData: {
      type: Object,
      default: () => this.dialogForm
    }
  },
  data() {
    return {
      dialogFormRules: {
        strThemeName: [
          { required: true, message: '请输入皮肤名称', trigger: 'blur' }
        ],
        strUrl: [
          { required: true, validator: validateUrl, trigger: 'blur' }
        ],
        strImg: [
          { required: true, message: '请上传皮肤缩略图', trigger: 'change' }
        ],
        iOrgsysnum: [
          { required: true, message: '请选择机构类型', trigger: 'change' }
        ],
        optionsType: [
          { required: true, message: '请选择设备类型', trigger: 'change' }
        ]
      },
      dialogOptions: {
        add: '添加皮肤',
        editTheme: '修改皮肤'
      },
      dialogForm: {
        strThemeName: '',
        strUrl: '',
        strImg: '',
        strOperator: '',
        iDevicesysnum: '',
        iOrgsysnum: ''
      }
    }
  },
  mounted() {
    console.log('props mounted', this.formData)
  },

  created() {
    this.dialogForm.strOperator = this.$store.getters.name
    console.log('props', this.formData)
    this.$nextTick(_ => {
      this.dialogForm = {
        strThemeName: this.formData.strThemeName,
        strUrl: this.formData.strUrl,
        strImg: this.formData.strImg,
        strOperator: this.formData.strOperator,
        iDevicesysnum: this.formData.iDevicesysnum,
        iOrgsysnum: this.formData.iOrgsysnum + ''
      }
    })
  },
  methods: {
    cancleDialog(formName) {
      this.$refs[formName].resetFields()
      this.dialogForm = {
        strThemeName: '',
        strUrl: '',
        strImg: '',
        strOperator: '',
        iDevicesysnum: '',
        iOrgsysnum: ''
      }
      this.$parent.dialogVisible = false
    },
    confirmSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialogForm.iOrgsysnum instanceof Array) {
            this.dialogForm.iOrgsysnum = this.dialogForm.iOrgsysnum.splice(-1)[0]
          }
          confirmAddTheme(this.dialogForm).then(res => {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.$parent.dialogVisible = false
            this.$parent.fetchList()
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      // this.dialogVisible = false
      // this.$refs[formName].resetFiles()
    },
    modifiedSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialogForm.iOrgsysnum instanceof Array) {
            this.dialogForm.iOrgsysnum = this.dialogForm.iOrgsysnum.splice(-1)[0]
          }
          this.dialogForm.iThemeNum = this.formData.iThemeNum
          updateRowTheme(this.dialogForm).then(res => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.$parent.dialogVisible = false
            this.$parent.fetchList()
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      // this.dialogVisible = false
      // this.$refs[formName].resetFiles()
    }
  }
}
</script>
